<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI 诗词创作平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./index.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#7C3AED',
            secondary: '#9333EA'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.core.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.theme.min.css" rel="stylesheet">
  <style>
    body {
      min-height: 1024px;
    }

    ::selection {
      background: rgba(124, 58, 237, 0.2);
      color: #7C3AED;
    }

    .category-card:hover {
      transform: translateY(-2px);
    }

    input:focus {
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    }

    .hero-section {
      background-image: url('https://ai-public.mastergo.com/ai/img_res/b78a48cb4758c59a38a92f41f0208ab8.jpg');
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    }

    .hero-section>div {
      position: relative;
    }

    .category-card img {
      transition: transform 0.3s ease;
    }

    .category-card:hover img {
      transform: scale(1.05);
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  </style>
</head>

<body class="bg-gray-50">
  <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
    <nav class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
      <h1 class="text-4xl font-['Pacifico'] text-primary mb-4">AI Poetry Assistant</h1>
      <div class="flex items-center space-x-8">

        <div class="search-container">
          <input type="text" class="search-input" placeholder="搜索..." id="searchInput" autocomplete="new-password">
          <div class="search-results" id="searchResults"></div>
        </div>
      </div>
      <div class="flex items-center space-x-6">
        <a href="../aicreate/index.html" class="text-gray-600 hover:text-primary whitespace-nowrap">创作中心</a>
        <a href="#" class="text-gray-600 hover:text-primary whitespace-nowrap">飞花令</a>
        <a href="#" class="text-gray-600 hover:text-primary whitespace-nowrap">排行榜</a>
        <a href="#" class="text-gray-600 hover:text-primary whitespace-nowrap" style="display: none;">回到顶部</a>
        <button id="sg" class="px-4 py-2 bg-primary text-white rounded-button hover:bg-primary/90 whitespace-nowrap"
          onclick="window.location.href='../login/index.html'">登录 /
          注册</button>
        <div id="kh" class="relative group">
          <button class="flex items-center" id="tx">
            <img src="https://ai-public.mastergo.com/ai/img_res/5ed58b63b35a40361c28d94a00073c51.jpg" alt="头像"
              class="w-10 h-10 rounded-full object-cover">
          </button>
          <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden group-hover:block" id="tox"
            style="display: none;">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人主页</a>
            <hr class="my-2">
            <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <main class="pt-16">
    <section class="hero-section h-[600px] flex items-center">
      <div class="max-w-7xl mx-auto px-4 w-full">
        <div class="max-w-xl">
          <h2 class="text-4xl font-bold text-gray-900 mb-6">AI 赋能诗词创作</h2>
          <p class="text-lg text-gray-600 mb-8">让传统诗词焕发新生命，用 AI 激发你的创作灵感。在这里，每个人都能成为诗人，让文字之美永恒流传。</p>
          <button
            class="px-8 py-3 bg-primary text-white rounded-button hover:bg-primary/90 text-lg whitespace-nowrap shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300">开始创作</button>

        </div>
      </div>
    </section>
    <section id="zk" class="py-16 bg-white">
      <div id="scfl" class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-8">
          <h3 class="text-2xl font-bold text-gray-900">诗词分类</h3>
          <button
            class="group flex items-center space-x-2 px-4 py-2 text-primary hover:text-primary/90 transition-all duration-300 !rounded-button border border-primary/20 hover:border-primary/40 bg-white hover:bg-primary/5">
            <span class="whitespace-nowrap">查看更多分类</span>
            <i
              class="fas fa-chevron-down transform transition-transform duration-300 group-data-[expanded=true]:rotate-180"></i>
          </button>
        </div>
        <div class="grid grid-cols-4 gap-6 transition-all duration-500" id="categoryGrid" overflow: hidden;>
        </div>
      </div>
    </section>
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4">
        <h3 class="text-2xl font-bold text-gray-900 mb-8">每日精选</h3>
        <div id="mrjx" class="grid grid-cols-3 gap-6">

        </div>
      </div>
    </section>
    <section id="a" class="py-16 bg-white" style="padding: 150px 0;background-color: #f5f5f5;">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between mb-8">
          <h3 class="text-2xl font-bold text-gray-900">活跃排行</h3>
          <!-- <a href="#" class="text-primary hover:text-primary/90">查看更多</a> -->
        </div>
        <div id="sgph" class="grid grid-cols-3 gap-6">
        </div>
      </div>
    </section>
    <section id="features" class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-center mb-12">趣味功能</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <!-- Flying Words Game -->
          <div class="relative overflow-hidden rounded-lg shadow-lg">
            <div class="absolute inset-0">
              <img src="https://ai-public.mastergo.com/ai/img_res/0569b7b9670c804383c2fcbca7433abd.jpg" alt="飞花令背景"
                class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
            </div>
            <div class="fhlp relative p-8 flex flex-col h-[300px]">
              <span class="alert"></span>
              <h3 class="text-2xl font-bold text-white mb-4">飞花令</h3>
              <div class="flex-1 flex flex-col items-center justify-center">
                <p class="text-white text-lg mb-4">本轮关键字: <span id="keyword"
                    class="text-primary bg-white px-2 py-1 rounded-lg font-bold">月</span></p>
                <input type="text" class="w-full max-w-md px-4 py-2 !rounded-button text-gray-900 mb-4"
                  placeholder="请输入包含" 月"字的诗句..."="">
                <i class="iconfont icon-duicuo-yuan-dui icon-duicuo-yuan-cuo"></i>
                <div id="xxx1" class="flex items-center space-x-4">
                  <button
                    class="!rounded-button bg-primary text-white px-6 py-2 text-sm font-medium hover:bg-primary/90 transition-colors">开始游戏</button>
                  <button
                    class="!rounded-button bg-white text-primary px-6 py-2 text-sm font-medium hover:bg-gray-100 transition-colors">换一个字</button>
                </div>
              </div>
              <p class="fhl text-gray-200 text-sm text-center">剩余时间: 30 秒</p>
            </div>
          </div>
          <!-- AI Poetry Painting -->
          <div class="relative overflow-hidden rounded-lg shadow-lg">
            <div class="absolute inset-0">
              <img src="https://ai-public.mastergo.com/ai/img_res/988ed5b63021888f05d58a820badc42f.jpg" alt="AI 诗画创作背景"
                class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
            </div>
            <div class="relative p-8 flex flex-col h-[300px]">
              <h3 class="text-2xl font-bold text-white mb-4">AI 诗画创作</h3>
              <div class="flex-1 flex flex-col items-center justify-center">
                <textarea class="w-full max-w-md h-24 px-4 py-2 !rounded-button text-gray-900 mb-4 resize-none"
                  placeholder="请输入你喜欢的诗句，AI 将为你创作一幅诗意画作..."></textarea>
                <div id="xxx2" class="flex items-center space-x-4">
                  <button
                    class="!rounded-button bg-primary text-white px-6 py-2 text-sm font-medium hover:bg-primary/90 transition-colors">生成画作</button>
                  <button
                    class="!rounded-button bg-white text-primary px-6 py-2 text-sm font-medium hover:bg-gray-100 transition-colors">分享作品</button>
                </div>
              </div>
              <p class="text-gray-200 text-sm text-center">今日剩余生成次数: 3 次</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer class="bg-gray-900 text-gray-400 py-10">
    <div class="max-w-7xl mx-auto px-4">
      <div class="grid grid-cols-4 gap-8">
        <div>
          <h5 class="text-white text-lg font-medium mb-4">关于我们</h5>
          <p class="text-sm leading-relaxed">AI 诗词创作平台致力于传承和创新中国传统诗词文化，让更多人感受诗词之美。</p>
        </div>
        <div>
          <h5 class="text-white text-lg font-medium mb-4">快速链接</h5>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white">创作中心</a></li>
            <li><a href="#" class="hover:text-white">诗词分类</a></li>
            <li><a href="#" class="hover:text-white">排行榜</a></li>
            <li><a href="#" class="hover:text-white">飞花令</a></li>
          </ul>
        </div>
        <div>
          <h5 class="text-white text-lg font-medium mb-4">帮助支持</h5>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white">使用指南</a></li>
            <li><a href="#" class="hover:text-white">常见问题</a></li>
            <li><a href="#" class="hover:text-white">意见反馈</a></li>
            <li><a href="#" class="hover:text-white">联系我们</a></li>
          </ul>
        </div>
        <div>
          <h5 class="text-white text-lg font-medium mb-4">关注我们</h5>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">
              <i class="fab fa-weixin text-lg"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">
              <i class="fab fa-weibo text-lg"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700">
              <i class="fab fa-qq text-lg"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
        <p>&copy; 2025 AI 诗词创作平台. 保留所有权利</p>
      </div>
    </div>
  </footer>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../../../node_modules/lodash/lodash.js"></script>
  <script src="../../utils/auth.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.min.js"></script>
  <script src="../../utils/request.js"></script>
  <script src="../../utils/alert.js"></script>
  <script src="./index.js"></script>

</body>

</html>